<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个jquery界面</title>
    <!--引入bootstrap css-->
    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/bootstrap/easyui.css">
    <!--定义页面样式-->
    <style type="text/css">
        form {color:green}
    </style>
    <!--引入外部的js库-->
    <script src="../lib/easyui/jquery.min.js"></script>
    <script src="../lib/easyui/jquery.easyui.min.js"></script>
    <script src="../lib/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
//jquery的代码尽量写在body里
<body>
<button class="btn btn-default" id="btn1">按钮1</button>
<label>这是一个label</label>
<button class="btn btn-default" id="btn2">按钮2</button>
<p>第1个p标签</p>
<p>第2个p标签</p>
<p class="mypclass" style="color:red;">第3个p标签</p>
<p>第4个p标签</p>
<table class="table table-striped table-bordered">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr id="tr_1">
        <td>张三</td>
        <td>20</td>
        <td>湖南</td>
        <td>
            <button id="btn_1" class="btn btn-primary">查看</button>
            <button id="bton_1" class=" btn btn-danger">删除</button>
        </td>
    </tr>
    <tr id="tr_2">
        <td>张三1</td>
        <td>21</td>
        <td>江西</td>
        <td>
            <button id="btn_2" class="btn btn-primary">查看</button>
            <button id="bton_2" class=" btn btn-danger">删除</button>
        </td>
    </tr>
    <tr id="tr_3">
        <td>张三2</td>
        <td>22</td>
        <td>山东</td>
        <td>
            <button id="btn_3" class="btn btn-primary">查看</button>
            <button id="bton_3" class="btn btn-danger">删除</button>
        </td>
    </tr>
    </tbody>
</table>
<script>
    //浏览器执行源码是从上到下一行行执行
    //被依赖的先引入
    //css 要求在js库之前引入

    //$ 查找符
    //ready(function(){}网页加载完成，则执行回调函数
    /*$(document).ready(function(){
    $.messager.alert('系统提示','jquery easyui 引入成功','warning')
    }）
    */
/*  function是回调函数
    $(function(){
        $.messager.alert('系统提示','jquery easyui 引入成功','warning')
    })
*/
    $('#btn1').on('click',function(e){
        //点击完后会隐藏
        $(this).hide();
        $.messager.alert('系统提示','点击了按钮1','info');
    })
    $('#btn2').on('click',function(e){
        //show是显示节点的方法
        $('#btn1').show();
        // 根据标签选择
        $.messager.alert('label的内容',$('label').text(),'info');
      })
    $('p.mypclass').click(function(e){
        $.messager.alert('系统提示','你点击了p.mypclass')
     })
     //每个button都绑定事件
    $('button').click(function(e){
        console.log(e)
     })
    //每个p标签绑定同样的事件
    $('p').on('click',function(e){
        //this 指的是当前的触发节点
        $(this).hide();
    })
    $('button[id^="btn_"]').on('click',function(e){
    var idno = $(this).attr('id')
    console.log(idno)
    idno = idno.slice(4)
    var msg = '找到了数据 id='+ idno + '内容是....'
    $.messager.alert('',msg)
    })
    $('button[id^="bton_"]').on('click',function(e){
    $(this).closest('tr').remove();
    })
</script>
</body>
</html>